<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Napi</title>
</head>

<body>
	<style>
		body {
			background-color: #778899;
			padding: 100px;
		}

		a {
			text-decoration: none;
		}

		.input {
			color: blue;
		}
	</style>
	<script type="text/javascript">
		var mode = 0;
		let vscode = acquireVsCodeApi();
		window.onload = function () {
			document.getElementById("selectMode").addEventListener("change", function (e) {
				if (e.target.value == 1) {
					mode = 1;
				} else {
					mode = 0;
				}
			});
		}

		function sendMsg() {
			var fileNames = document.getElementById("interfaceFile").value;
			var genDir = document.getElementById("genFile").value;
			var result = {
				mode: mode,
				fileNames: fileNames,
				genDir: genDir,
			}
			vscode.postMessage(result);
		}

		function cancel() {
			vscode.postMessage("cancel");
		}

		window.addEventListener('message', event => {
			const message = event.data;
			document.getElementById("interfaceFile").value = message;
			fillInputDir(message);
		})

		function inputChange() {
			var fileNames = document.getElementById("interfaceFile").value;
			fillInputDir(fileNames);
		}

		function fillInputDir(fileNames) {
			var dir;
			var fileName;
			if (mode == 0) {
				if (fileNames.indexOf(",") != -1) {
					fileName = fileNames.substring(0, fileNames.indexOf(","));
				} else {
					fileName = fileNames;
				}
				dir = fileName.substring(0, fileName.lastIndexOf("\\"));
			} else {
				dir = fileNames;
			}
			document.getElementById("genFile").value = dir;
			document.getElementById("buildFile").value = dir;
		}
	</script>
	<div id="selectMode">
		选择方式：
		<input type="radio" name="mode" value="0" id="files" checked="checked">.d.ts文件(多个文件之间用,号分割)</input>
		<input type="radio" name="mode" value="1" id="dir">文件夹</input>
	</div>
	</br>
	<div id="interface">
		选择接口文件: <input type="text" id="interfaceFile" onchange="inputChange()" onporpertychange="inputChange() ">
	</div>

	<div style="margin-top: 10px;">
		生成框架路径: <input accept="text" id="genFile">
	</div>

	<div style="margin-top: 10px;">
		编译脚本路径: <input type="text" id="buildFile">
	</div>
	<div style="margin-top: 10px;">
		<a href="https://gitee.com/openharmony/napi_generator" target="_blank">
			<button style="width: 90px;">Help</button>
		</a>
		<button type="button" style="width: 90px;" onclick="cancel()">Cancel</button>
		<button type="button" style="width: 90px;" onclick="sendMsg()">Ok</button>
	</div>
</body>

</html>